<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="../../../images/logo.ico" type="image/x-icon"/>
    <title>申   请</title>
    <style lang="">
         body{
            background-color: #fff;
        }
        .contentBox{
        width: 700px;
        height: 340px;
        position: absolute;
        top: 5%;
        left: 0;
        bottom: 0;
        right: 0;
        margin: 0 auto;
        border:1px solid #93918f;

        }
        p{
            font-size: 20px;
            letter-spacing: 10px;
        }
        aside {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 5%;
            font-size: 25px;
            font-weight: 500 !important;
        }
       .container{
            display: flex;
            justify-content: left;
            align-items: left;
            flex-direction: column;
            line-height: 10px;
            margin-left: 4%;

        }
        .footer{
            display: flex;
            justify-content: right;
            align-items: center;
            flex-direction: column;
            margin-left: 40%;
            line-height: 10px;
        }
        .row {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: 40px;
            margin-top: 10px;
            /* background-color: red; */
        }
        .inputbox2{
          width: 80px;
          height: 25px;
          border: none;
          border-bottom:1px solid #000 ;

        }
        .inputbox3{
          width: 150px;
          height: 25px;
          font-size: 14px;
          border: none;
          border-bottom:1px solid #000 ;

    }
        .input-box{
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .txt2{
            margin-left: 300px;
            margin-top: 50px;
        }
        .txt3{
            margin-left: -60px;

        }
        .txt{
         margin-left: -100px;
        }
        .phone{
            margin-left: 320px;
        }
        span{
            letter-spacing: 0;
        }
        .btn_box{
        margin-left: 40%;
        margin-top: 80px;
        }
        .layui-btn{
            display: inline-block;
            height: 38px;
            line-height: 38px;
            padding: 0 18px;
            background-color: #009688;
            color: #fff;
            white-space: nowrap;
            text-align: center;
            font-size: 14px;
            border: none;
            border-radius: 2px;
            cursor: pointer;
            margin-left: 20px;
        }
        #btnPrint{
            background-color: #2f81ff;
        margin-right: 30px;

        }
        #btnBack{
            background-color: #ff8400;
        }
        input{
            font-size: 20px;
        }
        #jobNumber{
            font-size: 14px;
        }
        #ftBox{
            position:absolute;
            top:250%;
            bottom: 0px;
            right:0px;
            left: 2%;
            
        }
        #ftBox p{
            letter-spacing: 0px;
        }
        .image{
            position:relative;
        }
        #bg{
            position:absolute;
            top:10%;
            bottom: 0px;
            right: 5%;
            left: 0px;
            margin: 10px -40px;
        }

    </style>
    <style media="print">
        @page {
            size: auto;  /* auto is the initial value */
            margin: 0mm; /* this affects the margin in the printer settings */
        }
    </style>

</head>
<body>
    <div id="outBox">
        <div class="image" id="a">

        </div>
        <div class="contentBox" id="priBox">
            <aside>申   请</aside>
            <div class="container">
        
                <div class="row">
                    <div class="input-box ">
                        <p class="">本人</p>
                        <input type="text" autocomplete="off" class="layui-input inputbox2" readonly name="recordname" id="recordname" />
                    </div>
                    <div class="input-box ">
                        <p class=" ">身份证号：</p>
                        <input type="text" autocomplete="off" class="layui-input inputbox3" readonly name="idNumber" id="idNumber" />
                    </div>
                    <div class="input-box ">
                        <p class=" idcard">现申请将</p>
                    </div>
        
                </div>
                <div class="row" style="margin-left:10px">
                    <div class="input-box " >
                        <p class="txt">档案关系从王舍人劳动保障服务中心转到<span> _______</span></p>
                    </div>
                    
                </div>
                <div class="row">
                    <div class="input-box ">
                        <p class="txt3"><span> ________________________________</span>  。联系电话<span> _________________</span></p>
                    </div>
                    
                </div>
                <p class="txt2">申请人:</p>
                
            </div>
        
        <div class="footer">
            
            <p>  年  月   日</p>
        </div>
        <div class="ftBox" id="ftBox" style="display: none;margin-top: 90px;">
                               
        </div>
        <div class="btn_box">
                  
            <div class="layui-btn avoid-this" id="btnPrint">
               打印
            </div>
            <!-- <div class="layui-btn avoid-this" id="btnBack">
                返回
            </div> -->
        
        </div>
        
        
        </div>

    </div>
  
        <!--js逻辑-->
        <script src="../../../lib/layui/layui.js"></script>
        <script src="../../../plugins/jquery/jquery-2.1.0.js"></script>
        <script src="../../../plugins/jquery/jQuery.print.js"></script>
        <script src="../../../js/print.js"></script>

        <script type="text/javascript" src="../../../lib/loading/okLoading.js"></script>

        <script>
            layui.use(["element", "table", "form", "jquery", "laydate", "okLayer", "okUtils"], function () {
                let table = layui.table;
                let form = layui.form;
                let laydate = layui.laydate;
                let okLayer = layui.okLayer;
                let okUtils = layui.okUtils;
                let $ = layui.jquery;
            okLoading.close($);
            // 数据渲染
            okUtils.ajax("../../../data/navs.json", "get", true).done(function (res) {
                    console.log(res)
                    var usernameVal = res.data[0].recordname
                    console.log(usernameVal)
                    var idVal = res.data[0].idnumber
                    var textVal = res.data[0].title


                    $("#recordname").val(usernameVal);
                    $("#idNumber").val(idVal);
                    $("#txt").val(textVal);

                    }).fail(function (error) {
                    console.log(error)
	             	});

             
            })
        </script>
    
</body>
</html>